.vhi-root:has(.block_time-codes) {
		--lesson_width: 920px;
		--main_color: 155,81,224;
		
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    gap: 0;
    align-items: top;
    
    margin-bottom: 20px;
    padding-top: 0;
    height: calc(var(--lesson_width) / var(--video-aspect-ratio)) !important;
    
    overflow: hidden;
}

.vhi-root:has(.block_time-codes) iframe {
    position: static;
    width: calc(100% - 250px);
    background: #2a143e;
    transition: all .3s;
}

.vhi-root:has(.block_time-codes.closed) iframe {
    flex: 1 1 100% !important;
}

.vhi-root:has(.block_time-codes.opend) iframe {
    flex: 1 1 calc(100% - 270px) !important;
}

.vhi-root .block_time-codes  {
    position: relative;
    flex: 0 1 270px; 
    
    transition: all .3s;
}

.vhi-root .block_time-codes.closed {
    flex: 0 0 0;
    
    transition: all .3s;
}

.vhi-root .block_time-codes.closed * {
    font-size: 0;
    
    transition: all .3s;
}

.vhi-root .block_time-codes .overfill {
    /*border-radius: 0 10px 10px 0;*/
    overflow: hidden;
    display: block;
    height: 100%;
    
    transition: all .3s;
}

.vhi-root .block_time-codes .inner_Codes {
    background: #3B3B3B;
    height: 100%;
    
    overflow-y: scroll;
    
    transition: all .3s;
}

.vhi-root .block_time-codes.closed .inner_Codes {
    opacity: 0;
}

.vhi-root .block_time-codes .inner_Codes::-webkit-scrollbar {
  width: 3px;
  height: 8px;
  background-color: #aaa;
}

.vhi-root .block_time-codes .inner_Codes::-webkit-scrollbar-thumb {
  background: #000;
}

.vhi-root .block_time-codes.closed .inner_Codes {
    overflow: hidden;
}

.vhi-root .block_time-codes.closed .inner_Codes a {
    padding: 0;
}

.vhi-root .block_time-codes .open_timecodes {
    position: absolute;
    top: 10px;
    left: -10px;
    transform: translatex(-100%);

    min-width: 100px;
    padding: 6px 14px;
    color: #1C274C;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgba(var(--main_color), .3);
    z-index: 10;
    
    cursor: pointer;
    
    transition: all .3s;
}

.vhi-root .block_time-codes .open_timecodes:hover {
	color: #fff;
	background: rgba(var(--main_color),1);
}

.vhi-root .block_time-codes.opend .open_timecodes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none'%3E%3Cpath d='M333.333 200L433.333 300M433.333 300L333.333 400M433.333 300H166.667M460 566.667H140C102.663 566.667 83.9933 566.667 69.7333 559.4C57.1899 553.01 46.99 542.81 40.6 530.267C33.3333 516.007 33.3333 497.337 33.3333 460V140C33.3333 102.663 33.3333 83.9947 40.6 69.734C46.99 57.1897 57.1899 46.991 69.7333 40.5997C83.9933 33.3333 102.663 33.3333 140 33.3333H460C497.337 33.3333 516.005 33.3333 530.266 40.5997C542.81 46.991 553.009 57.1897 559.4 69.734C566.667 83.9947 566.667 102.663 566.667 140V460C566.667 497.337 566.667 516.007 559.4 530.267C553.009 542.81 542.81 553.01 530.266 559.4C516.005 566.667 497.337 566.667 460 566.667Z' stroke='black' stroke-width='66.6667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.vhi-root .block_time-codes a {
		position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    padding: 16px 20px 16px 40px;
    
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none !important;
    
    background: rgba(255,255,255,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.5 9C6.98526 9 9 6.98526 9 4.5C9 2.01472 6.98526 0 4.5 0C2.01472 0 0 2.01472 0 4.5C0 6.98526 2.01472 9 4.5 9ZM3.91207 6.23061L6.03616 4.97655C6.38793 4.76883 6.38793 4.23117 6.03616 4.02345L3.91207 2.76939C3.57017 2.56752 3.15 2.83026 3.15 3.24592V5.75406C3.15 6.16972 3.57017 6.43248 3.91207 6.23061Z' fill='white'/%3E%3C/svg%3E") no-repeat 15px center;
    border-left: 4px solid rgba(var(--main_color),1);
    
    transition: all .3s;
}

.vhi-root .block_time-codes.closed a {
    display: none;
}

.vhi-root .block_time-codes a.active {
    background-color: rgba(var(--main_color),.7);
}

.vhi-root .block_time-codes a:hover {
    text-decoration: none;
    background-color: rgba(var(--main_color),0.1);
}

.vhi-root .block_time-codes a strong {
    font-weight: 500;
}

.timecode_progress {
    position: absolute;
    bottom: 0;
    left: -5px;
    height: 3px;
    width: calc(100% + 5px);
    padding-left: 1px;
}

.vhi-root .block_time-codes a.active .timecode_progressLine {
    display: block;
    height: 100%;
    background: rgba(255,255,255, .5);
    transition: all 4s;
}


@media (max-width: 992px) {
    .vhi-root:has(.block_time-codes) {
        height: calc((100vw - 70px) / var(--video-aspect-ratio)) !important;
    }
}

@media (max-width: 520px) {
    .vhi-root:has(.block_time-codes) {
        display: block;
        height: inherit !important;
        overflow: visible;
    }
    
    .vhi-root:has(.block_time-codes) iframe {
        width: 100%;
        height: calc(100vw / var(--video-aspect-ratio) - 40px) !important;
        /*border-radius: 10px !important;*/
    }
    
    .vhi-root .block_time-codes .open_timecodes {
        position: static;
        display: inline-block;
        
        margin: 10px 0;
        
        transform: none;
    }
    
    .vhi-root .block_time-codes {
        display: block;
    }
    
    .vhi-root .block_time-codes .overfill {
        /*border-radius: 10px;*/
    }
}

@media (max-width: 400px) {
    .vhi-root .block_time-codes a {
        gap: 10px 20px;
        font-size: 10px;
    }
}